import { PageWrapper } from "@/components/PageWrapper";
import { Title } from "@/components/Title";
import {
  Button,
  Form,
  FormProps,
  Input,
  Modal,
  Popconfirm,
  Popover,
  Table,
} from "antd";
import { useEffect, useState } from "react";
import {
  addCompany,
  deleteCompany,
  editCompany,
  getCompanyList,
} from "./services";

type FieldType = {
  name?: string;
  industry?: string;
  city?: string;
};

const Fastapi = () => {
  const [form] = Form.useForm();
  const [loadingQuery, setLoadingQuery] = useState(false);
  const [companyList, setCompanyList] = useState([]);
  const [visibleRecord, setVisibleRecord] = useState({
    visible: false,
    record: {},
  });

  const handleQuery = () => {
    setLoadingQuery(true);
    getCompanyList().then((res) => {
      console.log(res);
      setLoadingQuery(false);
      setCompanyList(res);
    });
  };

  useEffect(() => {
    handleQuery();
  }, []);

  const handleEdit = (params) => {
    editCompany({
      id: visibleRecord.record.id,
      ...params,
    }).then((res) => {
      handleQuery();
      setVisibleRecord({ visible: false, record: {} });
    });
  };
  const handleDelete = (params) => {
    deleteCompany(params.id).then((res) => {
      handleQuery();
    });
  };
  const handleAdd = (params) => {
    addCompany(params).then((res) => {
      handleQuery();
      setVisibleRecord({ visible: false, record: {} });
    });
  };

  const onSubmit = () => {
    const values = form.getFieldsValue();
    console.log("Success:", values, visibleRecord.record);
    let maxId = 0;
   
    if (visibleRecord.record.id) {
      handleEdit(values);
    } else{
      for (let i = 0; i < companyList.length; i++) {
        if (maxId < companyList[i].id) {
          maxId = companyList[i].id;
        }
      }
      maxId = maxId + 1;
      handleAdd({ ...values, id: maxId });
    }
  };

  const columns = [
    {
      title: "公司名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "所属行业",
      dataIndex: "industry",
      key: "industry",
    },
    {
      title: "所属城市",
      dataIndex: "city",
      key: "city",
    },
    {
      title: "操作",
      render: (text, record) => {
        return (
          <div>
            <Button
              onClick={() => {
                setVisibleRecord({ visible: true, record: record });
                form.setFieldsValue(record);
              }}
              type="primary"
              style={{ marginRight: 12 }}
            >
              编辑
            </Button>
            <Popconfirm
              title={"确认删除此公司？"}
              onConfirm={() => handleDelete({ id: record.id })}
              okText="是"
              cancelText="否"
            >
              <Button type="primary">删除</Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  return (
    <PageWrapper narrow minWidth="1068px">
      <Title style={{ marginLeft: 16, marginBottom: 12 }}>
        Fastapi服务测试页面
      </Title>
      <Modal
        visible={visibleRecord.visible}
        title={visibleRecord.record.id ? "编辑" : "新增"}
        onOk={onSubmit}
        onCancel={() => {
          setVisibleRecord({ visible: false, record: {} });
        }}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"
          form={form}
        >
          <Form.Item<FieldType>
            label="公司名称"
            name="name"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="所属行业"
            name="industry"
            rules={[{ required: true, message: "Please input your industry!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="所属城市"
            name="city"
            rules={[{ required: true, message: "Please input your city!" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
      <Button
        onClick={() => {
          setVisibleRecord({
            visible: true,
            record: {},
          });
        }}
        type="primary"
      >
        新增
      </Button>
      <Table
        loading={loadingQuery}
        columns={columns}
        dataSource={companyList}
        rowKey={(r) => r.id}
      />
    </PageWrapper>
  );
};

export default Fastapi;
